<template>
	<view class="ikz-menu"
		:style="{color:cssInfo.color,margintop:cssInfo.margin_top+'rpx',backgroundColor:cssInfo.background_color,width:cssInfo.width+'%',borderRadius:cssInfo.bg_border_radius+'rpx'}">
		<!--
		模板说明：
		1、支持一行4个图标和5个图标，通过css数据中的menu_num数量控制
		2、支持颜色自定义，直接使用css数据中的color
		3、其他显示和功能数据同系统设定
		 -->
		<!-- 可滑动 -->
		<block v-if="show_list.length>8">
			<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"
				style="" class="ikz-swiper">
				<block v-for="(vo,indexs) in show_info " :key="indexs">
					<swiper-item>
						<view class="ikz-swiper-item">
							<!-- <view class="ikz-menu-sm" style="color:{{cssInfo.color}};margin-top:{{cssInfo.margin_top}}rpx;background-color:{{cssInfo.background_color}};width:{{cssInfo.width}}%;border-radius:{{cssInfo.bg_border_radius}}rpx;"> -->
							<view class="ikz-menu-sm">
								<block v-if="cssInfo.num == 4">
									<block v-for="(item,index) in vo" :key="index">
										<!--分享和客服功能-->
										<block v-if="item.url.path=='share'||item.url.path=='contact'">
											<view class="ikz-menu-item">
												<image class="ikz-menu-img" :src="item.src"
													:style="{borderRadius:cssInfo.border_radius}"></image>
												<!-- <image class="ikz-menu-img" :src="item.src"></image> -->
												<view class="ikz-menu-title">
													{{item.title}}
												</view>
												<button class='ikz-login-button' :open-type="item.url.path"></button>
											</view>
										</block>
										<!--分享和客服功能-->

										<!--正常功能-->
										<block v-else>
											<view class="ikz-menu-item" @click="directToPath" :data-info="item.url.info"
												:data-mode="item.url.mode" :data-path="item.url.path">
												<image class="ikz-menu-img" :src="item.src"
													:style="{borderRadius:cssInfo.border_radius}"></image>
												<!-- <image class="ikz-menu-img" src="{{item.src}}" style='border-radius:{{cssInfo.border_radius}}'></image> -->
												<view class="ikz-menu-title">
													{{item.title}}
												</view>
											</view>
										</block>
										<!--正常功能-->
									</block>
								</block>
								<block v-else>
									<block v-for="(item,index) in vo" :key="index">
										<!--分享和客服功能-->
										<block v-if="item.url.path=='share'||item.url.path=='contact'">
											<view class="ikz-menu-item-small">
												<image class="ikz-menu-img" :src="item.src"
													:style="{borderRadius:cssInfo.border_radius}"></image>
												<!-- <image class="ikz-menu-img" :src="item.src" style='border-radius:{{cssInfo.border_radius}}'></image> -->
												<view class="ikz-menu-title-small">
													{{item.title}}
												</view>
												<button class='ikz-login-button' :open-type="item.url.path"></button>
											</view>
										</block>
										<!--分享和客服功能-->

										<!--正常功能-->
										<block v-else>
											<view class="ikz-menu-item-small" @click="directToPath"
												:data-info="item.url.info" :data-mode="item.url.mode"
												:data-path="item.url.path">
												<image class="ikz-menu-img" :src="item.src"
													:style="{borderRadius:cssInfo.border_radius}"></image>
												<!-- <image class="ikz-menu-img" src="{{item.src}}" style='border-radius:{{cssInfo.border_radius}}'></image> -->
												<view class="ikz-menu-title-small">
													{{item.title}}
												</view>
											</view>
										</block>
										<!--正常功能-->

									</block>
								</block>
							</view>
						</view>
					</swiper-item>
				</block>
			</swiper>
		</block>
		<!-- 可滑动 -->
		<!-- 不可滑动 -->
		<block v-else-if="show_list.length>0">
			<view class="swiper-item">
				<!-- <view class="ikz-menu-sm" style="color:{{cssInfo.color}};margin-top:{{cssInfo.margin_top}}rpx;background-color:{{cssInfo.background_color}};width:{{cssInfo.width}}%;border-radius:{{cssInfo.bg_border_radius}}rpx;"> -->
				<view class="ikz-menu-sm">
					<block v-if="cssInfo.num == 4">
						<block v-for="(item, indexs) in show_list" :key="indexs">
							<!--分享和客服功能-->
							<block v-if="item.url.path == 'share' || item.url.path == 'contact'">
								<view class="ikz-menu-item">
									<image class="ikz-menu-img" :src="item.src"
										:style="{ borderRadius: cssInfo.border_radius }"></image>
									<!-- <image class="ikz-menu-img" :src="item.src"></image> -->
									<view class="ikz-menu-title">{{ item.title }}</view>
									<button class="ikz-login-button" :open-type="item.url.path"></button>
								</view>
							</block>
							<!--分享和客服功能-->

							<!--正常功能-->
							<block v-else>
								<view class="ikz-menu-item" @click="directToPath" :data-info="item.url.info"
									:data-mode="item.url.mode" :data-path="item.url.path">
									<image class="ikz-menu-img" :src="item.src"
										:style="{ borderRadius: cssInfo.border_radius }"></image>
									<!-- <image class="ikz-menu-img" src="{{item.src}}" style='border-radius:{{cssInfo.border_radius}}'></image> -->
									<view class="ikz-menu-title">{{ item.title }}</view>
								</view>
							</block>
							<!--正常功能-->
						</block>
					</block>

					<block v-else>
						<block v-for="(item, indexs) in show_list" :key="indexs">
							<!--分享和客服功能-->
							<block v-if="item.url.path == 'share' || item.url.path == 'contact'">
								<view class="ikz-menu-item-small">
									<image class="ikz-menu-img" :src="item.src"
										:style="{ borderRadius: cssInfo.border_radius }"></image>
									<!-- <image class="ikz-menu-img" :src="item.src" style='border-radius:{{cssInfo.border_radius}}'></image> -->
									<view class="ikz-menu-title-small">{{ item.title }}</view>
									<button class="ikz-login-button" :open-type="item.url.path"></button>
								</view>
							</block>
							<!--分享和客服功能-->

							<!--正常功能-->
							<block v-else>
								<view class="ikz-menu-item-small" @click="directToPath" :data-info="item.url.info"
									:data-mode="item.url.mode" :data-path="item.url.path">
									<image class="ikz-menu-img" :src="item.src"
										:style="{ borderRadius: cssInfo.border_radius }"></image>
									<!-- <image class="ikz-menu-img" src="{{item.src}}" style='border-radius:{{cssInfo.border_radius}}'></image> -->
									<view class="ikz-menu-title-small">{{ item.title }}</view>
								</view>
							</block>
							<!--正常功能-->
						</block>
					</block>
				</view>
			</view>
		</block>
		<!-- 不可滑动 -->

	</view>
</template>

<script>
	var app = getApp();
	import ikz from "@/pages/Common/tools"
	export default {
		name: 'menu3',
		props: {
			showData: {
				type: Object,
			},
			cssData: {
				type: Object,
			}
		},
		data() {
			return {
				indicatorDots: true,
				vertical: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				background: ['', ''],
				cssInfo: {},
				badgeStyle: '',
				show_info: [],
				show_list: []
			};
		},
		watch: {
			showData: {
				handler(newName, oldName) {
					var show_list = newName.list;
					var show_info = [];
					var key = 0;
					var index = 0;
					show_info[key] = [];
					for (var i = 0; i < show_list.length; i++) {
						var remainder = i % 8;
						if (remainder == 0 && i != 0) {
							key++;
							index = 0;
							show_info[key] = [];
							show_info[key].push(show_list[i]);
						} else {
							show_info[key].push(show_list[i]);
							index++;
						}
					}
					this.show_info = show_info;
					this.show_list = show_list;
				},
				immediate: true,
				deep: true
			},
			cssData: {
				handler(newName, oldName) {
					var cssInfo = {};
					cssInfo.color = newName.color || '#353535';
					cssInfo.num = newName.num || 4;
					cssInfo.border_radius = newName.border_radius || 5;
					cssInfo.margin_top = newName.margin_top || 0;
					cssInfo.background_color = newName.background_color || '';
					cssInfo.width = newName.width || 100;
					cssInfo.bg_border_radius = newName.bg_border_radius || 0;
					this.cssInfo = cssInfo;
				},
				immediate: true,
				deep: true
			},
		},
		mounted() {

		},
		methods: {
			setStyle() {
				this.badgeStyle = `width: ${String(this.text).length * 8 + 12}px`
			},
			directToPath(e) {
				if (!uni.getStorageSync("user_info")) {
					uni.navigateTo({
						url: "/pages/login/index"
					})
					return
				}
				var url = {
					info: e.currentTarget.dataset.info,
					mode: e.currentTarget.dataset.mode,
					path: e.currentTarget.dataset.path,
				}
				app.globalData.type_id = e.currentTarget.dataset.info;
				ikz.getNav(url);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.ikz-menu {
		width: 100%;
		margin: auto;
	}

	.ikz-swiper {
		height: 430rpx;
		background: #fff;
		border-radius: 15rpx;
		overflow: hidden;
		width: 95%;
		margin: 15rpx auto 0;
	}

	.ikz-swiper-item {
		margin-top: 20upx;
	}

	.swiper-item {
		box-sizing: border-box;
		padding: 20rpx 0;
	}

	.ikz-menu-sm {
		width: 100%;
		margin: auto;
		display: flex;
		flex-wrap: wrap;
	}

	.ikz-menu-item {
		width: 25%;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		text-align: center;
		margin: 15rpx 0px;
	}

	.ikz-login-button {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
		opacity: 0;
		border: 0px;
		z-index: 100;
	}

	.ikz-menu-item-small {
		width: 20%;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		text-align: center;
		margin: 15rpx 0px;
		font-size: 29rpx;
	}

	.ikz-menu-img {
		width: 120rpx;
		height: 120rpx;
	}

	.ikz-menu-img-circle {
		width: 65rpx;
		height: 65rpx;
		border-radius: 50%;
	}

	.ikz-menu-img-small {
		width: 82rpx;
		height: 82rpx;
	}

	.ikz-menu-img-small-circle {
		width: 82rpx;
		height: 82rpx;
		border-radius: 50%;
	}

	.ikz-menu-title {
		margin-top: 5rpx;
		font-size: 28rpx;
	}

	.ikz-menu-title-small {
		width: 100%;
		margin-top: 5rpx;
		font-size: 25rpx;
	}
</style>
